<template>
  <div style="flex:1;" class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div class="form-group">
            <v-select :value.sync="model.f_area" v-model="model.f_area" condition="f_area like '%{}%'" :search='true'
                :options='$parent.$parent.f_area' placeholder='选择区域' @change="$parent.$parent.change(false,true,true)"
            close-on-select></v-select>
          </div>
          <div class="form-group">
            <v-select :value.sync="model.f_street" v-model="model.f_street" condition="f_street like '%{}%'" :search='true'
                :options='$parent.$parent.f_street' placeholder='选择路段' @change="$parent.$parent.change(false,false,true)"
            close-on-select></v-select>
          </div>
          <div class="form-group">
            <v-select :value.sync="model.f_area_address" v-model="model.f_area_address" condition="f_area_address like '%{}%'"
                :options='$parent.$parent.f_area_address' placeholder='选择街道' :search='true' close-on-select></v-select>
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="$parent.$parent.search()" v-el:cx>查询</button>
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="$parent.$parent.AddModify($parent.$parent.initData())" v-el:cx>新增</button>
          </div>
        </div>
     </criteria>
     <data-grid :model="model" partial='list' v-ref:grid>
       <template partial='head'>
         <tr>
           <th>序号</th>
           <th>区域</th>
		       <th>路段</th>
           <th>街道</th>
           <th>操作人</th>
           <th>操作日期</th>
           <th>操作</th>
         </tr>
       </template>
       <template partial='body'>
         <td style="text-align: center;">{{$index+1}}</td>
         <td style="text-align: center;">{{row.f_area}}</td>
         <td style="text-align: center;">{{row.f_street}}</td>
         <td style="text-align: center;">{{row.f_area_address}}</td>
         <td style="text-align: center;">{{row.f_operate_date}}</td>
         <td style="text-align: center;">{{row.f_operator}}</td>
         <td style="text-align: center;">
           <button type="button" name="button" class="btn btn-link"
           @click.stop="$parent.$parent.$parent.AddModify(row)">修改</button>
           <button type="button" name="button" class="btn btn-link"
           @click.stop="$parent.$parent.$parent.deleteArea(row)">删除</button>
         </td>
       </template>
     </data-grid>
   </criteria-paged>
   <div style="height:50%" v-if='modify'>
     <add-or-modify :data='areaData' ></add-or-modify>
   </div>
 </div>
</template>

<script>
import co from 'co'
import Vue from 'vue'
import { PagedList } from 'vue-client'
import * as Util from '../Util'

export default {
  title: '区域维护',
  data () {
    return {
      model: new PagedList('rs/sql/singleTable_OrderBy', 50, {items:`'*'`,tablename:`'t_area'`, orderitem:`'f_area'`}),
      f_area:[],
      f_street: [{label:'全部',value: ''}],
      f_area_address: [{label:'全部',value: ''}],
      modify: false,
      areaData: {}
    }
  },
  watch:{
    'model.model.f_area' (val) {
        this.model.model.f_street = ['']
        this.model.model.f_area_address = ['']
    },
    'model.model.f_street' (val) {
        this.model.model.f_area_address = ['']
    }
  },
  ready () {
    this.change(true)
    this.search()
  },
  methods: {
    search () {
      this.modify = false
      this.$refs.paged.$refs.cri.search()
    },
    AddModify (data) {
      this.modify = true
      this.areaData = data
    },
    change(flag,param,sign) {
      if (flag) {
        this.$post('rs/sql/params',{data: {key: 'f_area',condition: `1=1`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
        .then((res)=>{
          this.f_area = res.data
        })
      } else {
        if (sign) {
          if (param) {
            this.$post('rs/sql/params',{data: {key: 'f_street',condition: `f_area = '${ this.$refs.paged.$refs.cri.model.f_area[0]}'`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
            .then((res)=>{
              this.f_street = res.data
            })
          }else {
            this.$post( 'rs/sql/params',{data: {key: 'f_area_address',condition: `f_street = '${ this.$refs.paged.$refs.cri.model.f_street[0]}'`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
            .then((res)=>{
              this.f_area_address = res.data
            })
          }
        }
      }
    },
    initData () {
      return {
        f_area: '',
        f_street: '',
        f_area_address: ''
      }
    },
    deleteArea (row) {
      this.$post( 'rs/logic/deleteArea',{data: row},{ resolveMsg: '删除小区成功', rejectMsg: '删除小区失败' })
      .then((res)=>{
        this.search()
      })
    }
  },
  events: {
    'clean' () {
      this.search()
    }
  }
}
</script>
<style media="screen">
  .divtext {
    min-width: 50px;
    max-width: 200px;
    border: 1px solid green;
    display: inline-block;
  }
</style>
